<template>
  <div :class="className" :style="{height:height,width:width}" style=""/>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import 'echarts-liquidfill'
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    baifei: {

      default: '0'
    },
    tooltip: {
      type: String,
      default: '无'
    }
  },
  data() {
    return {
      chart: null,
      item:[],
      value:[],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      let that = this
      this.chart = echarts.init(this.$el, 'macarons')
      //this.chart.showLoading();

      var option = {
        tooltip: {
        trigger: 'item',
        backgroundColor: '#FFFFFF',
        borderColor: '#EEF1F7',
        borderWidth: 1,
        confine: true,
        textStyle: {
          // width: 30,
          // height: 30,
          // lineHeight: 10,
          color: '#666666',
          fontSize: '8'
        },
        formatter: function(res) {
            console.log(res)
            // let dataStr = `<div style=""><p style="font-weight:bold;margin:0 8px 15px;">8888</p></div>`
            return that.tooltip
        }
      },
    series: [{
            type: 'liquidFill',
            radius: '90%',
            center: ['50%', '50%'],
            color: ['#10B9FF', '#10B9FF', '#10B9FF'], //水波
            data: [that.baifei, that.baifei, that.baifei], // data个数代表波浪数
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent'
            },
            label: {
                //标签设置
                normal: {
          // 				position: ['50%', '30%'],
          // 				formatter: '50%', //显示文本,
                  textStyle: {
                    fontSize: '15px', //文本字号,

                  }
                }
              },
            outline: {
                show: true,
                itemStyle: {
                    borderColor: '#10B9FF',
                    borderWidth: 2
                },
                borderDistance: 3
            }
        }
    ]
}


      this.chart.setOption(option)

    }
  }
}
</script>
